<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
	<style type="text/css">
	    #div1 .active{
        	background:yellow;
        }
        #div1 div{
        	width:200px;height:200px;background: #ccc;border:1px  solid #999;margin-top: 5px;display: none;
        }
       
	</style>
	<script type="text/javascript">
	    window.onload = function (){
	    	var oDiv = document.getElementById('div1');
	        var aBtn = oDiv.getElementsByTagName('input');
	        var aDiv = oDiv.getElementsByTagName('div');

	        //点击每个按钮  给她加上class等于active
	        for(var i=0;i<aBtn.length;i++){
	        	aBtn[i].index = i;  //增加一个自定义属性index ,表示当前选中的div
	        	aBtn[i].onclick = function(){
                    for(var i=0;i<aBtn.length;i++){
                    	aBtn[i].className = '';
                    	aDiv[i].style.display = 'none';
                    }

                    this.className = 'active';
                    aDiv[this.index].style.display = 'block';//点击按钮显示当前div
	        	}
	        	
	        }
	        
	    }
       

        
	</script>
</head>
<body>
    <div id="div1">
    	<input class="active" type="button" value="招生" />
    	<input type="button" value="教育" />
    	<input type="button" value="培训" />
    	<input type="button" value="出国" />
    	<div style="display:block;">11111</div>
    	<div>22222</div>
    	<div>33333</div>
    	<div>44444</div>
    </div>
	
</body>
</html>